@import "./com";
header {
    .h_top {
        
        width: vw(750);
        height: vw(124);
        display: flex;
        align-items: center;
        justify-content: space-between;

        > .va {
            margin-left: vw(20);
            width: vw(122);
            height: vw(57);
            border: vw(2) solid $col;
            border-radius: vw(26);
           

            > a p {
                margin: vw(8) vw(30);
            }
        }

        // 地区

        .sel {
            position: relative;
            margin-right: vw(10);

            > select {
                border: vw(1) solid $col;
                width: vw(160);
                height: vw(60);

                // 去除三角
                -webkit-appearance: none;
                appearance: none;
                font-size: vw(26);
                text-indent: vw(17);
            }
            li {
                content: "";
                position: absolute;
                right: vw(15);
                top: vw(23);
                border-top: vw(50);
                width: 0;
                height: 0;
                border: vw(15) solid transparent;
                border-top: vw(20) solid $col;
                pointer-events: none;
            }
        }
    }
}

.box {

    overflow: auto;
    width: vw(750);

    > ul  {
        width: vw(750 * 2);
        // width: vw(750);
        height: vw(200);
        display: flex;
        justify-content: space-around;

        > li  a {
            height: vw(106);

            > img {
                width: vw(150);
                height: vw(150);
            }

            > p {
                text-align: center;
                font-size: vw(24);
            }
        }
    }
    .dots {
        height: vw(40);
        display: flex;
        justify-content: center;
        align-items: center;

        > span {
      
            margin-left: vw(20);
            width: vw(20);
            height: vw(20);
            border-radius: 50%;
            background-color: $col;
        }
    }
}

// 内容
main {
    width: vw(750);
    height: 100%;
    // position: relative;

    .groupbuying {
        margin: 0 2vh;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: vw(93);

        ul > img {
            width: vw(57);
            height: vw(57);
            margin: 0 0 vw(-12) 0;
        }

        div img {
            width: vw(27);
            height: vw(25);
            margin: 0 0 vw(-5) 0;
        }
        div span {
            font-size: vw(24);
        }
    }

    .top {
        width: vw(750);
        height: 100%;

        > ul {
            width: vw(750);
            height: vw(206);
            display: flex;
            justify-content: space-around;
            align-items: center;
            > li a{
                > img {
                    width: vw(130);
                    height: vw(130);
                }

                > p {
                    text-align: center;
                    font-size: vw(24);
                }
            }
        }
    }
}

// 尾部

nav {

    > ul {
        position: fixed;
        bottom: 0;
        background-color: #fff;
        width: vw(750);
        height: vw(120);
        display: flex;
        justify-content: space-around;

        > li {
            width: vw(70);
            height: vw(106);

            > a {
                > img {
                    width: vw(70);
                    height: vw(70);
                }
            }
            > p {
                text-align: center;
                font-size: vw(24);
            }
        }
    }
}
